<template>
	<view>		
		<view>
			<uni-popup  ref="popup" @change="change">
				<view class="popup-content">
					<image class="bg" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/login/icon01.png" mode=""></image>
					<!-- <text class="text">popup 内容</text> -->
					<view class="pop-content-title">{{infoList.title}}
					<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/detail/cancel.png" mode="" class="cancel" @click="cancel"></image>
					</view>
					<view class="pop-content-item" v-for='item in infoList.list' key='item'>
						<view class="pop-fir-line">
							<image :src="item.iconUrl" mode=""></image>
							<text>{{item.title}}</text>
						</view>
						<view class="pop-sec-line">
							<text>{{item.content}}</text>
						</view>
					</view>
					
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		props : ['type','status','infoList'],
		
		watch: {
		    status: {         //要监听的属性名
		        handler(newValue, oldValue) {
		        //监听到数据变化执行方法
				console.log(newValue,oldValue,'oldValue')
		        if(this.$props.status === true){
		        	this.$refs.popup.open(this.$props.type)
		        }
		        
		
		    },
		
		    deep: true // 深度监听父组件传过来对象变化
		
		    },
		},
		data() {
			return {
				// type: 'center',
				// infoList:[{
				// 	iconUrl:'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/home_btn_sl@2x.png',
				// 	title:'标题1',
				// 	content:'内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域'
				// },{
				// 	iconUrl:'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/home_btn_sl@2x.png',
				// 	title:'标题2',
				// 	content:'内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域'
				// },{
				// 	iconUrl:'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/home_btn_sl@2x.png',
				// 	title:'标题3',
				// 	content:'内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域'
				// },{
				// 	iconUrl:'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/home_btn_sl@2x.png',
				// 	title:'标题4',
				// 	content:'内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域'
				// },]
				
			}
		},
		methods: {
			cancel(){
				this.$refs.popup.close(this.$props.type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				if(e.show == false){
					this.$emit('tabtap',e.show)
				}
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				
			},
		},
	
		
	}
</script>

<style lang="scss">
	.box {
			@include flex;
		}
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: relative;
		// background-color: rgba(255, 255, 255, 0.6);
	
	
		// justify-content: center;
		// padding: 15px;
		// width: 100%;
		// height: 100%;
		// padding-bottom: 40rpx;
		background-color: #fff;
		.bg{
			position:absolute;
			height: 1000rpx;
			width: 1000rpx;
			opacity: 0.1;
		}
		.pop-content-title{
			// position: relative;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin:20rpx auto;
			font-weight: bold;
			.cancel{
				position: absolute;
				top:30rpx;
				right:60rpx;
				height: 40rpx;
				width: 40rpx;
				
			}
		}
		.pop-content-item{
			// display: inline-block;
			padding:20rpx 0;
			width: 80%;
			.pop-fir-line{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				image{
					width: 40rpx;
					height: 40rpx;
					padding-right:10rpx;
				}	
			}
			.pop-sec-line{
				font-size: 24rpx;
				padding-left:50rpx;
				padding-top:10rpx;
			}
			
		}
	}


	.text {
		font-size: 24rpx;
		color: #333;
	}

</style>


